<template>
  <div>
    <a-modal title="合并订单" :visible="visible" @before-open="open" @cancel="handleCancel" :align-center="false" title-align="start" width="800px" :mask-closable="false">
      <div>
        <div class="title">*默认将按照订单金额最大的作为目标订单号和物流等级</div>
        <div class="top"></div>
        <div class="bottom">
          <a-table size="mini" class="table-two-line" v-model:selected-keys="ids" row-key="id" :pagination="false" :row-selection="{ type: 'radio', width: '60', title: '设为目标' }" :data="tableData" :scroll="{ x: '100%', y: '500px' }">
            <template #columns>
              <a-table-column title="订单号" #cell="{ record }" :width="150">
                {{ record.platformOrderNumber }}
              </a-table-column>
              <a-table-column title="店铺" #cell="{ record }" :width="120">
                {{ record.shopName }}
              </a-table-column>
              <a-table-column title="商品种类数" #cell="{ record }" :width="80">
                {{ record.itemList.length }}
              </a-table-column>
              <a-table-column title="订单金额" #cell="{ record }" :width="120"> {{ currencyObj[record.currency] }} {{ record.amtPay }} </a-table-column>
              <a-table-column title="买家" #cell="{ record }" :width="120">
                {{ record.buyerName }}
              </a-table-column>
              <a-table-column title="收货人" #cell="{ record }" :width="120">
                {{ $extract(record, 'address.userName') }}
              </a-table-column>
              <a-table-column title="电话" #cell="{ record }" :width="120">
                {{ $extract(record, 'address.phoneNumber') }}
              </a-table-column>
              <a-table-column title="国家" #cell="{ record }" :width="120">
                {{ $extract(record, 'address.country') }}
              </a-table-column>
            </template>
          </a-table>
        </div>
      </div>
      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" class="ml10" @click="handleOk">确认</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { currencySymbol } from '@/utils/globalData'
  import { combineOrder } from '@/api/order'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['list', 'tobeCombineOrderId'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data: any = reactive({
        loading: false,
        currencyObj: currencySymbol,
        tableData: [],
        ids: [],
      })

      const open = () => {
        data.tableData = _.cloneDeep(props.list)
        data.tableData.sort((a: any, b: any) => {
          return b.amtPay - a.amtPay
        })
        data.ids[0] = data.tableData[0].id
      }
      const handleOk = async () => {
        let params = {
          tobeCombineOrderId: props.tobeCombineOrderId,
          targetOrderId: data.ids[0],
          childOrderIdList: data.tableData.map((e: any) => e.id),
        }
        const res: any = await combineOrder(params)
        if (res.code == 'SUCCESS') {
          Message.success('合并成功')
          visible.value = false
          emit('save')
        }
      }
      const handleCancel = () => {
        visible.value = false
      }
      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
      }
    },
  })
</script>

<style lang="less" scoped>
  .title {
    color: red;
  }
</style>
